<template>
  <div>
    <h1>请选择你想要去的地方</h1>
    <button @click="pageName = 'A'">玛卡巴卡</button>
    <button @click="pageName = 'B'">天线宝宝</button>
    <button @click="pageName = 'C'">喜洋洋与灰太狼</button>
    <component :is="pageName"></component>
  </div>
</template>
<script>
import A from "./a.vue";
import B from "./b.vue";
import C from "./c.vue";
export default {
  components: { A, B, C },
  data() {
    return {
      pageName: "A",
    };
  },
};
</script>
<style scoped>
button {
  margin-left: 20px;
  margin-left: 20px;
  background-color: rgba(228, 88, 88, 0.726);
}
</style>